import { Button, Form, Input, message } from 'antd';
import './index.scss'
import { loginFn } from '../../api/user'

import { useDispatch } from 'react-redux';

import { changeAdminName,changeCheckedkeys,changeLoginState,changeRole,changeToken } from '../../store/modules/user'

// 用来做页面路由跳转用的(编程式跳转)
import { useHistory } from 'react-router';

const App = () => {

  // 通过 hooks 使用轻提示
  const [messageApi, contextHolder] = message.useMessage()

  // 创建修改全局状态的触发函数
  const dispatch = useDispatch()

  // 创建跳转页面用的 router
  const router = useHistory()

  const onFinish = (values) => {
    // 表单提交且验证通过时回调函数
    // console.log('Success:', values);

    // 做用户登录的处理
    loginFn(values).then(res => {
      // console.log(res);
      // 登录请求结束之后先验证用户是否登录成功
      // 如果成功就 保存用户信息且跳转到首页
      if(res.code === '200'){
        // 登录成功
        messageApi.open({
          type: 'success',
          content: '恭喜你登录成功了.'
        })

        // 将用户的登录信息保存
        localStorage.setItem('loginState', true)
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('adminname', res.data.adminname)
        localStorage.setItem('role', res.data.role)
        localStorage.setItem('checkedkeys', JSON.stringify(res.data.checkedkeys))

        // 将用户状态存到全局状态中
        dispatch(changeAdminName(res.data.adminname))
        dispatch(changeCheckedkeys(res.data.checkedkeys))
        dispatch(changeLoginState(true))
        dispatch(changeRole(res.data.role))
        dispatch(changeToken(res.data.token))
        // 登录成功之后要跳转到首页
        router.push('/')
      }
      // 如果失败要给一个轻提示，显示失败原因
      else {
        // 登录失败
        messageApi.error('温馨提示：' + res.message)
      }
    })
  };

  const onFinishFailed = (errorInfo) => {
    // 提交表单且数据验证失败后回调事件
    console.log('Failed:', errorInfo);
  };

  return (<>
  {/* 是用来显示轻提示的标签 */}
    {contextHolder}

    <Form
    className='login-form'
      name="basic"
      labelCol={{
        span: 6,
      }}
      wrapperCol={{
        span: 15,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="管理员账号"
        name="adminname"
        rules={[
          {
            required: true,
            min: 1,
            // pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '请输入管理员账号!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密 码"
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>


      <Form.Item
        wrapperCol={{
          offset: 4,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit" className='login-btn'>
          登录
        </Button>
      </Form.Item>
    </Form>
    </>
  )
}
export default App;
